<template>
  <view class="page-user">
    <view class="user-section">
      <view class="info_box" id="info_box">
        <view class=" flex justify-start align-center " :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }]">
          <view class="header-title">
            <view class="cuIcon-back header-left " @tap="back"></view>
            <view class="header-center">{{i18n['我的钱包']}}</view>
            <!-- #ifndef MP-WEIXIN -->
            <view @tap="handleJump" data-url="/pages/wallet/account-bind/index" class="header-right">{{i18n['绑定账户']}}</view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view></view>
            <!-- #endif -->
          </view>
        </view>
        <view class="money-wrap">          
          <view class="money-content">
            <view class="item-wrap ">
              <view class="item-content flex justify-around padding-lr align-center">
                <view class="item text-white">
									<view class="item-num ">{{ (moneyInfo.user_money || 0) | formatNumber }}</view>
                  <view class="item-title ">可提取金额（元）</view>
                </view>
                <view class="item text-white" @tap="handleJump" :data-url="'/pages/wallet/settled-detail/index?freeze_money='+moneyInfo.commission_freeze_money">
									<view class="item-num ">{{ (moneyInfo.commission_freeze_money || 0) | formatNumber }}</view>
                  <view class="item-title ">待结算金额（元）</view>
                </view>
              </view>
            </view>
            <view class="money-btn-wrap">
              <view class="money-btn withdraw bg-white   text-theme" @tap="handleJump" data-url="/pages/wallet/withdraw/index">{{i18n['提现']}}</view>
              <!-- <view class="money-btn use" @tap="handleJump" data-url="/pages/wallet/recharge/index" >{{i18n['充值']}}</view> -->
            </view>
          </view>
        </view>
      </view>
      <view class="box-center flex justify-between">
        <view class="left_main">近30天明细</view>
        <view class="right_main" @tap="handleJump" data-url="/pages/wallet/consumer-detail/index">{{i18n['查看全部']}} <text class="cuIcon-right"></text> </view>
      </view>
      <view class="detaiLiat">
        <scroll-view scroll-y :style="{ height: 'calc(100vh - 110rpx  - ' + heightTop + 'px)' }">
          <view class="list">
            <view class="list-wrap">
              <view class="ongg padding-tb-sm" v-for="(item, index) in list" :key="index">
                <view class="buy-left">
                  <view class="share-right" style="overflow: hidden;">
                    <view class="text-cut-2 desc">{{ item.remark }}</view>
                    <view class="riqiblls">{{ item.create_time }}</view>
                  </view>
                </view>
                <view class="price-right">
                  <text v-if="item.after_money - item.before_money > 0" class="add">+{{ item.change_money }}</text>
                  <text v-else class="jian">{{ item.change_money }}</text>
                </view>
              </view>
            </view>
          </view>
					<fu-empty-ui v-if="list&&list.length==0"></fu-empty-ui>
        </scroll-view>
      </view>
    </view>
    <!-- 弹窗  -->
    <fu-popup v-model="isShow" mode="center" width="540rpx" height="600rpx">
      <view class="pop-content padding">
        <view class="text-333 text-bold text-lg text-center">{{i18n['提现规则']}}</view>
        <jyf-parser :html="freeze_money_rule"></jyf-parser>
      </view>
      <view class="padding-top flex align-center justify-center" @tap="closePop">
        <view class="round close-btn flex align-center justify-center"><text class="cuIcon-close" style="color: #838383;"></text></view>
      </view>
    </fu-popup>

    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      money: '', //余额
      freeze_money: '', //冻结金额
      total_revenue_money: '', //总金额
			total_money: '', // 总金额
      heightTop: 0,
      list: [],
      isShow: false, //规则弹框
			moneyInfo:'',//金额信息
      freeze_money_rule: [] // 规则说明
    };
  },
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},
  onUnload() {
    uni.$off('changeMoney', function(data) {});
  },
  onLoad(options) {
    let _this = this;
    //   _this.getMoney();

    uni.$on('changeMoney', function(data) {
      _this.money = '';
      _this.getMoney();
    });
  },
  onShow() {
    this.getMoney();
    this.getMoneyList();
  },
  methods: {
    showRules() {
      this.isShow = true;
    },
    /**
     * @description 关闭规则说明
     */
    closePop() {
      this.isShow = false;
    },

    getHeight() {
      const that = this;
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#info_box')
        .boundingClientRect(data => {
          that.heightTop = data.height;
        })
        .exec();
    },
    // 金额明细
    getMoneyList() {
      this.$api
        .post(global.apiUrls.getMoneyDetail, {
					change_type:0
        })
        .then(res => {
          if (res.data.code == 1) {
            this.list = res.data.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    back() {
      uni.navigateBack();
    },
    getMoney() {
      let _this = this;
      _this.$api
        .get(global.apiUrls.getMyMoney, {})
        .then(res => {
          if (res.data.code == 1) {
						this.moneyInfo=res.data.data
						
            _this.freeze_money_rule = res.data.data.freeze_money_rule;
            this.getHeight();
          }
        })
        .catch(err => {
          console.log(err, 'get_my_money');
        });
    }
  }
};
</script>

<style lang="scss">
.page-user {
  // background: #fff;
  height: 100vh;
}

.header-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  .header-left {
    font-size: 42rpx;
  }
  .header-center {
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    letter-spacing: 1rpx;
  }

  view {
    width: 33.3%;
  }
}
.header-right {
    letter-spacing: 1rpx;
    text-align: right;
    font-size: 28rpx;
    font-weight: 500;
  }
.user-section {
  width: 100%;
  height: 416rpx;
  position: relative;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 310rpx;
    background:$bgtheme;
		background: url($IMG_WECHAT_URL+'/wallet/wallet-bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
  }
}

.info_box {
  position: relative;
  z-index: 99;
  overflow: hidden;

  .money-wrap {
    // padding: 0 20rpx;
    box-sizing: border-box;
		background: url(/static/my/wallet-bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
    .money-content {
      border-radius: 24rpx;
      height: 355rpx;

      .item-wrap {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        padding-top: 50rpx;
        .item-content {
          height: 150rpx;
          border-radius: 24rpx;
          text-align: center;
          // box-shadow: 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.3);
          .item-title {
            font-size: 24rpx;
            margin-bottom: 30rpx;
						margin-top: 10rpx;
            text-align: center;
          }
          .item-num {
            // margin-top: 20upx;
            text-align: center;
            font-size: 48rpx;
            font-weight: bold;
          }

          .item-line {
            width: 1rpx;
            height: 44rpx;
            background: #eeeeee;
          }
        }
      }

      .t {
        padding-top: 66rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: 'PingFang SC';
        font-weight: 400;
        color: #999999;
      }
      .money {
        margin-top: 20upx;
        text-align: center;
        font-size: 48rpx;
        font-family: 'Arial';
        font-weight: bold;
        color: $theme;
      }

      .money-btn-wrap {
        margin-top: 10rpx;
        padding-bottom: 60rpx;
        display: flex;
        justify-content: center;

        .money-btn {
          width: 200rpx;
          height: 66rpx;
          border-radius: 80rpx;
          line-height: 66rpx;
          text-align: center;
          box-sizing: border-box;
          font-size: 28rpx;
          font-family: 'PingFang SC';
          font-weight: 500;

          &.withdraw {
            border: 2rpx;
            // color: #F02A2C;
            background: #ffffff;
            margin-right: 22rpx;
          }

          &.use {
            margin-left: 22rpx;
            color: #ffffff;
            background: linear-gradient(90deg, #FA2033 0%, #FF6530 100%);
          }
        }
      }
    }
  }
}

.box-center {
  width: 100%;
  height: 110rpx;
  padding: 0 32rpx;
  line-height: 110rpx;

  .left_main {
    font-size: 32rpx;
    font-family: 'PingFang SC';
    color: #333333;
    letter-spacing: 2rpx;
  }
  .right_main {
    font-size: 28rpx;
    font-family: 'PingFang SC';
    color: #999999;
    opacity: 1;
  }
}
.detaiLiat {
  width: calc(100% - 48rpx);
  margin-left: 24rpx;
  // margin-top: 20rpx;
  .list {
    border-radius: 24rpx;
    width: 100%;
    background-color: #fff;
    .list-wrap{
      // width: 702rpx;
      margin: 0 32rpx;
    }
    .ongg {
      // height: 132rpx;

      margin: 0 auto;
      // padding:0 32rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #eee;

      .buy-left {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .share-right {
          // padding-top: 10rpx;
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          line-height: 53rpx;
          flex: 1;
          .desc {
            line-height: 42rpx;
            font-size: 28rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            color: #333333;
          }

          .riqiblls {
            line-height: 32rpx;
            margin-top: 8rpx;
            font-size: 24rpx;
            font-family: 'PingFang SC';
            font-weight: 400;
            color: #bfbfbf;
          }
        }
      }

      .price-right {
        font-size: 32rpx;
        font-family: 'Oswald';
        font-weight: 400;

        opacity: 1;
        .add {
          color: #fa2033;
        }
        .jian {
          color: #333333;
        }
      }
    }
  }
}

// 规则弹窗 start
.pop-content {
  width: 540rpx;
  height: 472rpx;
  border-radius: 24rpx;
  background: #ffffff;
}

.close-btn {
  width: 54rpx;
  height: 54rpx;
  background-color: rgba(255, 255, 255, 0.6);
}

// 规则弹窗 end
.fu-iconfont {
  font-size: 24rpx;
}
</style>
